<template>
	<view class="index">
		<view class="orderde-top">
			<view style="display: flex;">
				<view style="flex: 1;">
					“吾之老”社区共享食堂
				</view>
			</view>
			<view style="display: flex;margin-top: 12px;">
				<view class="oder-type">
					{{orderData.o_status}}
				</view>
				<view class="oder-type">
					{{orderData.o_people_num}}人用餐
				</view>
			</view>
			<view class="qucan">
				<h3 style="font-size: 36px;">{{orderData.o_pickup_code}}</h3>
				<p style="font-size: 18px;margin-top: 3px;">取餐码</p>
			</view>
		</view>

		<view class="orderde-center">
			<view class="order-details">
				点餐详情
			</view>
			<view class="order-list">
				<view class="order-item" v-for="item in orderData.dishList">
					<view class="order-item-in">
						<view class="or-img">
							<up-image :show-loading="true" :src="baseUrl+item.cd_url" width="100px"
								height="70px"></up-image>
						</view>
						<view style="width: 100%;margin-top: 5px;margin-left: 5px;">
							<view style="display: flex;width: 100%;">
								<view style="flex: 1;">
									{{item.cd_name}}
								</view>
								<view>
									￥{{item.cd_price}}
								</view>
							</view>
							<p style="margin-top: 18px;">x{{item.num}}</p>
						</view>
					</view>
				</view>
				<view class="totalPrice">
					<view style="flex: 1;">
						共{{orderData.dishList.length}}份
					</view>
					<view style="margin-right: 19px;">
						合计：￥{{orderData.actually_pay}}
					</view>
				</view>
			</view>
		</view>
		<view class="orderde-bottom">
			<view class="order-details">
				订单详情
			</view>
			<view class="order-list">
				<view class="order-item">
					<view class="order-item-in2">
						<view style="flex: 1;">
							订单编号
						</view>
						<view style="display: flex;align-items: center;">
							<span style="font-size: 12px;">{{orderData.o_id}}</span>
							<up-copy :content="orderData.o_id">
								<text style="color: #D9001B;margin-left: 12px;">复制</text>
							</up-copy>
						</view>
					</view>
				</view>
				<view class="order-item" v-if="orderData.o_is_take_out==='外卖'">
					<view class="order-item-in2">
						<view style="flex: 1;">
							收货人姓名
						</view>
						<view style="display: flex;align-items: center;">
							<span>{{orderData.addressField.a_name}}</span>
						</view>
					</view>
					<view class="order-item-in2">
						<view style="flex: 1;">
							收货人电话
						</view>
						<view style="display: flex;align-items: center;">
							<span>{{orderData.addressField.a_tel}}</span>
						</view>
					</view>
					<view class="order-item-in2">
						<view style="flex: 1;">
							配送地址
						</view>
						<view style="display: flex;align-items: center;">
							<span>{{orderData.addressField.o_address}}</span>
						</view>
					</view>
				</view>
				<view class="order-item">
					<view class="order-item-in2">
						<view style="flex: 1;">
							下单时间
						</view>
						<view style="display: flex;align-items: center;">
							<span>{{orderData.o_time}}</span>
						</view>
					</view>
				</view>
				<view class="order-item">
					<view class="order-item-in2">
						<view style="flex: 1;">
							用餐人数
						</view>
						<view style="display: flex;align-items: center;">
							<span>{{orderData.o_people_num}}</span>
						</view>
					</view>
				</view>
				<view class="order-item">
					<view class="order-item-in2">
						<view style="flex: 1;">
							用餐方式
						</view>
						<view style="display: flex;align-items: center;">
							<span>{{orderData.o_is_take_out}}</span>
						</view>
					</view>
				</view>
				<view class="order-item">
					<view class="order-item-in2">
						<view style="flex: 1;">
							备注
						</view>
						<view style="display: flex;align-items: center;">
							<span>{{orderData.o_remark}}</span>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="bottomButtons">
			<view v-if="orderData.o_status === '待付款'" class="btngroup">
				<view class="btn" @click="toPayOrder(orderData.o_id)"> <!-- 待付款 -->
					去支付
				</view>
				<view class="btn" @click="toCancelOrder(orderData.o_id)"> <!-- 待付款 -->
					去取消
				</view>
			</view>
			<view class="btngroup" v-else-if="orderData.o_status === '已付款'" > <!-- 已付款 -->
				<view class="btn" @click="toConfirmOrder(orderData.o_id)"> <!-- 待付款 -->
					去确认
				</view>
				<view class="btn" @click="toRefundOrder(orderData.o_id)"> <!-- 待付款 -->
					去退款
				</view>
			</view>
		</view>

	</view>
</template>
<script setup>
	import {
		baseUrl
	} from '@/common/api/config.js';
	import {
		getUserOrderByIdAPI
	} from '@/services/order';
	import {
		useUserStore
	} from '@/stores/index.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	const orderId = ref(0)
	const orderData = ref({})
	onLoad(async (options) => {
		orderId.value = options.o_id //获得id
		const res = await getUserOrderByIdAPI({
			'o_id': options.o_id
		}) //请求后端数据
		if (res.data.code == 200) {
			orderData.value = res.data.data
		}
	})

	const toPayOrder = (o_id) => {
		uni.navigateTo({
			url: '/subpkg/order/orderPay/orderPay?orderId=' +o_id
		})
	}
	const toCancelOrder = (o_id) => {
		uni.navigateTo({
			url: '/subpkg/order/orderPay/orderPay?orderId=' +o_id
		})
	}
	const toRefundOrder = (o_id) => {
		uni.navigateTo({
			url: '/subpkg/order/orderPay/orderPay?orderId=' + o_id
		})
	}
	const toConfirmOrder = (o_id) => {
		uni.navigateTo({
			url: '/subpkg/order/orderPay/orderPay?orderId=' + o_id
		})
	}
</script>

<style scoped lang="scss">
	.index {
		margin: 0 auto;
		margin-top: 12px;
		width: 95%;
	}

	.orderde-top {
		font-size: 15px;
		width: 90%;
		margin: 0 auto;
		border-radius: 5px;
		background-color: #F2F2F2;
		padding: 3%;
		margin-bottom: 12px;
	}

	.orderde-center,
	.orderde-bottom {
		font-size: 15px;
		width: 96%;
		margin: 0 auto;
		border-radius: 10px;
		background-color: #F2F2F2;
		margin-bottom: 12px;
	}

	.oder-type {
		padding: 1px;
		padding-left: 9px;
		padding-right: 9px;
		font-size: 10px;
		color: #D9001B;
		border: 1px solid #D9001B;
		border-radius: 10px;
		margin-right: 12px;
	}

	.qucan {
		background-color: #F2F2F2;
		display: flex;
		margin-top: 12px;
		border-radius: 5px;
		height: 100px;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 12px;
	}

	.order-details {
		margin-top: 24rpx;
		margin-left: 24rpx;
		padding-top: 24rpx;
	}


	.order-item {
		/* background-color: #797979; */
		margin-top: 10px;
		border-bottom: 1px solid #D7D7D7;
	}

	.order-item:last-child {

		margin-top: 16px;
		border-bottom: none;
	}

	.order-item-in {
		display: flex;
		margin: 0 auto;
		width: 93%;
		margin-bottom: 12px;
	}

	.or-img {
		width: 100px;
		height: 70px;
		border-radius: 5px;
		overflow: auto;
		background-color: antiquewhite;
	}

	.order-item-in2 {
		padding: 14px;
		padding-left: 16px;
		display: flex;
		font-size: 12px;
	}

	.bottomButtons {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 0 0 10px 0;

	}

	.btngroup {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.btn {
		background-color: #ff0000;
		color: white;
		width: 100px;
		padding: 12px;
		text-align: center;
		height: 20px;
		line-height: 20px;
		border-radius: 30px;
		font-size: 28rpx;
		margin: 0 10px;

	}

	.totalPrice {
		width: 50%;
		margin-left: 50%;
		padding-top: 12px;
		padding-bottom: 12px;
		display: flex;
	}
</style>